<template>
  <div class="detail">
    <!-- 轮播图组件 -->
    <Swipe :bannerArr="gallery"></Swipe>
    <van-icon name="arrow-left" size="30" @click="$router.go(-1)" />
    <!-- 退货 -->
    <div class="info">
      <span>30天无忧退货</span>
      <span>48小时快速退款</span>
      <span>满88元免邮费</span>
    </div>
    <!-- 商品参数 -->
    <div class="proParams">
      <h3>商品参数</h3>
      <div class="proItem" v-for="item1 in infos" :key="item1.id">
        <span class="title">{{ item1.name }}</span>
        <span class="value">{{ item1.value }}</span>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="proDetail" v-html="goods_desc"></div>
    <!-- 加入购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-icon
        icon="cart-o"
        :badge="badge"
        text="购物车"
        url="/car"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCarFn"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 底部商品规格弹窗 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      ref="myref"
    />
  </div>
</template>
<script>
// 引入接口
import { detailData, addCarData, getGoodsCount } from "@/utils/http";
// 引入轮播图组件
import Swipe from "@/components/Swipe.vue";
export default {
  name: "",
  props: ["bannerArr"],
  data() {
    return {
      gallery: [], //轮播图空数组
      show: false, //是否显示商品弹出框
      goods: {
        picture: "", //弹出的商品展示面板上当前商品的缩略图
      }, //当前的商品信息对象
      goodsId: "", //当前的商品的id
      sku: {
        // 商品数据
        // 数据结构见下方文档
        tree: [],
        price: "1.00", //默认价格(单位元)
        stock_num: 227, //商品总库存
        hide_stock: false, //是否隐藏剩余库存
      },
      id: "", //产品id 来自productList的第一个数组项中的id
      badge: 0, //当前购物车总的商品数量
      infos: [], //商品参数
      goods_desc: "", //商品详情
    };
  },
  created() {
    // console.log(this.$route.query);
    detailData(this.$route.query).then((res) => {
      console.log(res);
      // 赋值
      this.gallery = res.data.data.gallery;
      this.infos = res.data.data.attribute;
      this.goods_desc = res.data.data.info.goods_desc;
      // 重新赋值.使用map返回一个新的数组,是图片参数和轮播图组建的参数名字保持一致
      // map特点 有返回值 返回一个新的数组 forEach 没有返回值
      this.gallery = this.gallery.map((item) => {
        item.image_url = item.img_url;
        return item;
      });
      // console.log(this.gallery);
      //   给当前组件上的数据分别赋值
      // 缩略图
      this.goods.picture = res.data.data.info.list_pic_url;
      //   单价
      this.sku.price = res.data.data.info.retail_price;
      //   总库存
      this.stock_num = res.data.data.info.goods_number;
      //   当前商品的id
      this.goodsId = res.data.data.info.id;
      //   产品id
      this.id = res.data.data.productList[0].id;
    });
    // 获取当前购物车的总商品数量
    getGoodsCount().then((res) => {
      // console.log(res);
      // 获取商品数量赋值给badge
      this.badge = res.data.data.cartTotal.goodsCount;
    });
  },
  components: {
    Swipe,
  },
  methods: {
    addCarFn() {
      // 点击加入购物车弹窗
      this.show = true;
    },
    onBuyClicked() {
      // 点击购买
      console.log("购买了");
    },
    onAddCartClicked() {
      // 点击加入购物车
      //   console.log("加入了");
      //   获取当前商品面板和组件实例对象(该对象的getSkuData方法,可以获取当前购买的商品的数量)
      // console.log(this.$refs.myref.getSkuData());
      addCarData({
        goodsId: this.goodsId,
        productId: this.id,
        number: this.$refs.myref.getSkuData().selectedNum,
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 0) {
          // 添加购物车成功
          console.log(this);
          // 隐藏面板
          this.show = false;
          // 获取当前商品的总数量并赋值给badge
          this.badge = res.data.data.cartTotal.goodsCount;
          // vant差价,提示
          this.$toast({
            type: "success", //类型
            message: "已经加入购物车", //提示问题
            duration: 1000, //提示时长
          });
        } else {
          // 添加失败
          this.$toast({
            type: "fail", //类型
            message: "添加失败", //提示问题
            duration: 1000, //提示时长
          });
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.detail {
  position: relative;
}
.van-icon {
  position: absolute;
  top: 5px;
  z-index: 20;
}
.info {
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  color: #999;
  height: 30px;
  line-height: 30px;
  background-color: beige;
  span {
    position: relative;
  }
  span::before {
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    border: 1px solid red;
  }
}
.proParams {
  h3 {
    text-align: center;
    margin-bottom: 10px;
  }
}
.proItem {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  height: 24px;
  color: #999;
  font-size: 12px;
  background: #efefef;
  line-height: 24px;
  text-align: cen;
  span.title {
    width: 50px;
    padding: 0 10px;
    border-right: 1px solid #ccc;
  }
  span.value {
    width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/deep/.proDetail {
  width: 100%;
  img {
      width: 100%;
      // display: block;
    }
  p {
    margin: 0;
    padding: 0;
    display: flex;
  }
}

</style>